<div id="christmas_gift_box" class="{% if section.settings.include_margins %}page-width{% endif %}">
  <div class="bg-with-image fill-width">

    <div class="bg-text">
      <div class="page-width">
        <div class="bg_page-width ">
          {%- for block in section.blocks -%}
            {%- case block.type -%}
              {%- when 'heading' -%}
                <h2 class="h1" {{ block.shopify_attributes }}>{{ block.settings.heading | escape }}</h2>
              {%- when 'image' -%}
                <img src="https://cdn.shopifycdn.net/s/files/1/0563/3926/7733/files/tenways_justonetree.png?v=1669086206" alt="tenways">
              {%- when 'paragraph' -%}
                <div class="bg__subheading rte bg__subheading-{{ forloop.index0 }}" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
              {%- when 'buttons' -%}
                <div class="ten-button banner__buttons{% if block.settings.button_label != blank and block.settings.button_link != blank  %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
                  {%- if block.settings.button_label != blank -%}
                    <div class="border_bg">
                      <a {% if block.settings.button_link != blank %}href="{{ block.settings.button_link }}" {% endif %} class="tenways_button-hover button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {% if block.settings.button_link == blank %} aria-disabled="true"{% endif %} {{ block.shopify_attributes }}>
                        <span>{{ block.settings.button_label | escape }}</span>
                      </a>
                    </div>
                  {%- endif -%}
                </div>

            {%- endcase -%}
          {%- endfor -%}
        </div>
      </div>
    </div>

    {%- if section.settings.des != blank -%}
      <div class="des">
        <div class="page-width">
          {{ section.settings.des }}
        </div>
      </div>
    {%- endif -%}

    <div class="bg-image">
      <div class="pc-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}" {% if section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 | floor }}%;"{% endif %}>
        {%- if section.settings.image != blank -%}
          <img srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
              {%- if section.settings.image.width >= 323 -%}{{ section.settings.image | img_url: '323x' }} 323w,{%- endif -%}
              {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
              {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
              {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
              {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
              {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
              {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w" src="{{ section.settings.image | img_url: '1500x' }}" sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)" alt="{{ section.settings.image.alt | escape }}" width="{{ section.settings.image.width }}" height="{{ section.settings.image.height }}">
          {%- else -%}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}
      </div>
      <div class="mb-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}" {% if section.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}>
        {%- if section.settings.image_mobile != blank -%}
    <img srcset="{%- if section.settings.image_mobile.width >= 165 -%}{{ section.settings.image_mobile | img_url: '165x' }} 165w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 323 -%}{{ section.settings.image_mobile | img_url: '323x' }} 323w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 360 -%}{{ section.settings.image_mobile | img_url: '360x' }} 360w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 535 -%}{{ section.settings.image_mobile | img_url: '535x' }} 535w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 750 -%}{{ section.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 1070 -%}{{ section.settings.image_mobile | img_url: '1070x' }} 1070w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 1500 -%}{{ section.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
        {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w" src="{{ section.settings.image_mobile | img_url: '1500x' }}" sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)" alt="{{ section.settings.image_mobile.alt | escape }}"  width="{{ section.settings.image_mobile.width }}" height="{{ section.settings.image_mobile.height }}">
    {%- else -%}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}
      </div>
    </div>


  </div>
</div>

{% schema %}
  {
    "name": "Background bg",
    "tag": "section",
    "class": "spaced-section background-images background-bg",
    "settings": [
      {
        "type": "checkbox",
        "id": "include_margins",
        "default": true,
        "label": "t:sections.apps.settings.include_margins.label"
      }, {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      }, {
        "type": "image_picker",
        "id": "image_mobile",
        "label": "Mobile image"
      }, {
        "type": "text",
        "id": "des",
        "label": "Remarks"
      }
    ],
    "blocks": [
      {
        "type": "heading",
        "name": "heading",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "heading",
            "default": "heading",
            "label": "Heading"
          }
        ]
      }, {
        "type": "image",
        "name": "image",
        "limit": 1
      }, {
        "type": "paragraph",
        "name": "paragraph",
        "settings": [
          {
            "type": "richtext",
            "id": "text",
            "default": "<p>Be the first to know about new collections and exclusive offers.</p>",
            "label": "Paragraph"
          }
        ]
      }, {
        "type": "buttons",
        "name": "buttons",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "button_label",
            "default": "Button label",
            "label": "Button label",
            "info": "Button label"
          }, {
            "type": "url",
            "id": "button_link",
            "label": "Button link"
          }, {
            "type": "checkbox",
            "id": "button_style_secondary",
            "default": false,
            "label": "background-1"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Background bg"
      }
    ]
  }
{% endschema %}